<template>
    <van-action-sheet
            title="请选择支付方式"
            cancel-text="取消"
            @cancel="onCancel"
            @close="onCancel"
            v-model:show="showPayPopup"
    >
        <van-radio-group v-model="payMethod">
            <van-cell title="微信支付" label="微信快捷支付" @click="payMethod = 'webchat'">
                <template #icon>
                    <van-icon
                            name="http://www.lgstatic.com/lg-app-fed/pay/images/wechat_b787e2f4.png"
                            size="30"
                            :style="{ marginRight: '12px' }"
                    ></van-icon>
                </template>
                <template #right-icon>
                    <van-radio name="webchat" checked-color="#ee0a24"></van-radio>
                </template>
            </van-cell>
            <van-cell title="支付宝支付" label="支付宝快捷支付" @click="payMethod = 'alipay'">
                <template #icon>
                    <van-icon
                            name="http://www.lgstatic.com/lg-app-fed/pay/images/ali_ed78fdae.png"
                            size="30"
                            :style="{ marginRight: '12px' }"
                    ></van-icon>
                </template>
                <template #right-icon>
                    <van-radio name="alipay" checked-color="#ee0a24"></van-radio>
                </template>
            </van-cell>
            <van-cell title="余额支付" label="可用余额为：2847.5元" @click="payMethod = 'yue'">
                <template #icon>
                    <van-icon
                            name="gold-coin"
                            color="#FF9900"
                            size="30"
                            :style="{ marginRight: '12px' }"
                    ></van-icon>
                </template>
                <template #right-icon>
                    <van-radio name="yue" checked-color="#ee0a24"></van-radio>
                </template>
            </van-cell>
        </van-radio-group>
        <van-cell>
            <van-button type="danger" round block @click="onPay">去支付</van-button>
        </van-cell>
    </van-action-sheet>
</template>

<script setup>
  import { defineEmits, defineProps, ref } from 'vue'

  const { showPayPopup } = defineProps({
    showPayPopup: {
      type: Boolean,
      required: true,
    }
  })
  console.log(showPayPopup)
  const emit = defineEmits(['changeShow', 'pay'])
  const payMethod = ref('yue')

  const onCancel = () => {
    emit('changeShow', false)
  }

  const onPay = () => {
    emit('pay', payMethod.value)
  }
</script>
